<template>
  <div class="news">
    <ul>
      <!-- <li @click="$router.push('/news/detail?id=1')">新闻1</li>
      <li @click="$router.push({path:'/news/detail',query:{id:2}})">新闻2</li>
      <li @click="$router.push({name:'detail',query:{id:3}})">新闻3</li> -->

      <li @click="$router.push('/news/detail/1')">新闻1</li>
      <li @click="$router.push({path:'/news/detail/2/world'})">新闻2</li>
      <li @click="$router.push({name:'detail',params:{id:3,abc:'hello'}})">新闻3</li>
    </ul>
    <RouterView />
  </div>
</template>

<script setup>
import {RouterView} from "vue-router";


// 动态路由

// query模式（不需要特殊配置，直接使用）
  // http://127.0.0.1:5173/news/detail?id=3
  // http://127.0.0.1:5173/news/detail?id=1
  // http://127.0.0.1:5173/news/detail?id=2

// params模式（需要配置动态路由，再使用）
  // http://127.0.0.1:5173/news/detail/1
  // http://127.0.0.1:5173/news/detail/2
  // http://127.0.0.1:5173/news/detail/3

import { useRoute } from "vue-router";

const route = useRoute();

console.log(route.meta);

</script>
